<template>
	<view class="content">
		<view class="top">
			<view class="go_back" @click="go_back">
				<image src="../../../static/img/back.png" mode=""></image>
			</view>
			<view class="dname">
				诈骗对策
			</view>
			
		</view>
		
		<view class="title">
			<view class="title_img" :class="{'click':isActive==1}" @click="ck_title(1)">
				<image src="../../../static/img/01_duice.png" mode=""></image>
			</view>
			<view class="title_img" :class="{'click':isActive==2}" @click="ck_title(2)">
				<image src="../../../static/img/02_duice.png" mode=""></image>
			</view>
			<view class="title_img" :class="{'click':isActive==3}" @click="ck_title(3)">
				<image src="../../../static/img/03_duice.png" mode=""></image>
			</view>
			<view class="title_img" :class="{'click':isActive==4}" @click="ck_title(4)">
				<image src="../../../static/img/04_duice.png" mode=""></image>
			</view>
			<view class="title_img"  :class="{'click':isActive==5}" @click="ck_title(5)">
				<image src="../../../static/img/05_duice.png" mode=""></image>
			</view>
		</view>
		
		<view :hidden="userFeedbackHidden" class="popup_content">
			<view class="dc_title">
				<h2>{{duicearr[type].title}}</h2>
			</view>
			<view class="dc_con">
				<rich-text :nodes="duicearr[type].con"></rich-text>
			</view>
			<view class="dc_img">
				<image :src="duicearr[type].img" mode="widthFix"></image>
			</view>
			<view class="dc_way">
				应对方法
			</view>
			<view class="dc_method">
				<rich-text :nodes="duicearr[type].method"></rich-text>
			</view>
		</view>
		<view class="popup_overlay" :hidden="userFeedbackHidden" @click="hideDiv()"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userFeedbackHidden:true,
				isActive: '',
				duicearr:[],
				type:1
			}
		},
		onLoad() {
			var that = this
			var data = require("static/data/duice.json")
			that.duicearr = data["duicearr"]
			// console.log(that.duicearr)
		},
		methods: {
			go_back(){
				const page = getCurrentPages()
				console.log(page)
				uni.navigateBack({
					delta:1 
					
				})
			},
			ck_title(type){
				
				this.type=type-1;
				this.isActive = type;
				this.userFeedbackHidden=false;
				
				
			},
			hideDiv(){
				this.userFeedbackHidden=true;
				this.type=0;
			}
		}
	}
</script>

<style>
	page{
		background-image: url(/static/img/backbg.jpg);
		background-repeat:no-repeat;
		background-size: 100% 100%;
		background-attachment: fixed
	}
	.content{
		/* border: red solid 1px; */
		width: 750rpx;
		/* background-color: #CCE5ED; */
		border-radius: 50rpx;
		margin: auto;

		box-sizing: border-box;
	}
	.top{
			/* border: #ACC3D4 solid 1px; */
		width: 700rpx;
		height: 50px;
		margin-bottom: 30rpx;
		display: flex;
		flex-direction: row;
		background-color: #CCE5ED;
	
	}
	.go_back{
		/* border: #ACC3D4 solid 1px; */
		width:25px;
		height: 25px;
		margin: 13px;
		
	}
	.go_back image{
		width: 100%;
		height: 100%;
	}
	.dname{
		width: 650rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		padding-right: 100rpx;
		box-sizing: border-box;
		font-size: 50rpx;
		font-weight: bolder;
		
		/* border: red solid 1px; */
	}
	.title{
		height: 100%;
		width: 600rpx;
		margin: 80rpx auto;

		
	}
	.click{
		border-radius: 30rpx;
		background-color: #C0DFE9;	
		box-shadow:5rpx 10rpx 20rpx 10rpx #AFC5CC;
	}
	.title_img{
		box-sizing: border-box;
		/* border: red solid 1px; */
		padding: 20rpx;
		width: 600rpx;
		height: 100rpx;
		margin-bottom: 80rpx;
	}
	.title_img image{
		width:100%;
		height: 100%;
	}
	
.popup_overlay {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color:rgba(0,0,0,0.5);
		z-index: 1001;
		-moz-opacity: 0.8;
		opacity: .80;
		filter: alpha(opacity=88);
	}

	.popup_content {
		
		height: 1000rpx;
		width: 600rpx;
		background-color: aliceblue;
		border: #ACC3D4 solid 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 50rpx;
		position: fixed;
		top: 15%;
		left: 10%;
		z-index: 1002;
		overflow-x: auto;
	}
	.dc_title{
		text-align: center;
		padding: 20rpx;
		color: #a7b6d4;
		text-shadow: 3rpx 3rpx 3rpx  #464646;
			}
	.dc_con p{
		text-indent: 2em;
		font-size: 36rpx;
	}
	.dc_img {
		width: 100%;
	}
	.dc_way{
		font-size: 46rpx;
		color: #fce007;
		text-shadow: 5rpx 5rpx 6rpx  #464646;
	}
	.dc_img image{
		width: 100%;
	}
	.dc_method p{
		/* text-indent: 2em; */
		font-size: 36rpx;
	}
</style>
